<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span :class="{'textactive' : !secondshow}" @click="manageshow" style="cursor: pointer;">工作记录     </span>
          <span v-if="secondshow" :class="{'textactive' : secondshow}"> > {{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable workrecord" v-show="!assshow">
      <div style="padding-top: 15px;">
        <el-row type="flex" justify="center" style="margin-bottom: 20px;">
          <el-col :span="23">
            <el-col style="width: 320px;">
              <el-col style="width: 320px;height: 360px;border: 2px solid #ececec;">
                <el-calendar v-model="data">
                  <template
                    slot="dateCell"
                    slot-scope="{date, data}">
                    <div style="width: 100%;height: 100%;">
                      <p>
                        {{ data.day.split('-').slice(2).join('-') }}
                      </p>
                    </div>
                  </template>
                </el-calendar>
              </el-col>
            </el-col>
            
            <el-col class="left2">
              <el-col v-for="(item,index) in assistant" :key="item.name">
                <el-row type="flex" justify="center">
                  <el-col class="listbgc">
                    <el-col :span="1" style="position: absolute;height: 100%;">
                      <div class="teamname" :style="{backgroundColor : colorlist[index]}">
                        <div class="team1">
                          <p>{{item.name}}</p>
                        </div>
                      
                      </div>
                    </el-col>
                    <el-col :span="23" style="float: right;">
                      <el-row style="margin-top: 20px;">
                        <el-col style="width: 25%;" v-for="(item1,index1) in item.personInfoVOList"
                                :key="index1">
                          <el-row type="flex" justify="center">
                            <el-col :span="23">
                              <div
                                class="listbox">
                                <el-row class="roletitle">
                                  <el-col>
                                    <p style="cursor: pointer;" @click="seeother(item1.role,item1.username,item1.name)">
                                      {{item1.name}}</p>
                                  </el-col>
                                </el-row>
                                <el-col class="tasknum">
                                  <el-row style="margin-bottom: 10px;">
                                    <el-col style="margin-bottom: 5px;">
                                      <el-col :span="12">
                                        <p>实推/应推 : </p>
                                      </el-col>
                                      <el-col :span="12" style="float: right;">
                                        <p style="padding-right: 10px;float: right;" v-if="item1.num !== null"
                                           :style="{color : item1.type}">{{item1.num}}</p>
                                        <p v-if="item1.num == null" style='font-size: 12px;'>暂无工作记录</p>
                                      </el-col>
                                    </el-col>
                                    <el-col>
                                      <el-col :span="12">
                                        <p>附加 : </p>
                                      </el-col>
                                      <el-col :span="12" style="float: right;">
                                        <p style="padding-right: 10px;float: right;color : #89898c;"
                                           v-if="item1.surplusNum !== null">{{item1.surplusNum}}</p>
                                        <p v-if="item1.surplusNum == null" style='font-size: 12px;'>暂无工作记录</p>
                                      </el-col>
                                    </el-col>
                                    <el-col>
                                    
                                    </el-col>
                                  </el-row>
                                </el-col>
                              
                              </div>
                            </el-col>
                          </el-row>
                        
                        </el-col>
                      </el-row>
                    
                    </el-col>
                  
                  </el-col>
                </el-row>
              </el-col>
              <el-col v-for="(item2,index2) in hr" :key="index2">
                <el-row type="flex" justify="center">
                  <el-col class="listbgc">
                    <el-col :span="1" style="position: absolute;height: 100%;">
                      <div class="teamname" :style="{backgroundColor : colorlist[index2]}">
                        <div class="team1">
                          <p>{{item2.name}}</p>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="23" style="float: right;">
                      <el-row style="margin-top: 20px;">
                        <el-col style="width: 25%;" v-for="(item3,index3) in item2.personInfoVOList"
                                :key="index3">
                          <el-row type="flex" justify="center">
                            <el-col :span="23">
                              <div :class="{'listbox' : item3.name!== '小组完成进度'}" style="width: 185px;margin:0 auto;margin-bottom: 15px;"> 
                                <el-row class="roletitle">
                                  <el-col>
                                    <p style="cursor: pointer;" @click="seeother(item3.role,item3.username,item3.name)">
                                      {{item3.name}}</p>
                                  </el-col>
                                </el-row>
                                <el-col class="tasknum">
                                  <el-row style="margin-bottom: 10px;">
                                    <el-col  v-if="item3.name !== '小组完成进度'" style="margin-bottom: 5px;">
                                      <el-col :span="12">
                                        <p>实推 : </p>
                                      </el-col>
                                      <el-col :span="12" style="float: right;">
                                        <p style="padding-right: 10px;float: right;" :style="{color : item3.type}">
                                          {{item3.num}}</p>
                                      </el-col>
                                    </el-col>
                                    <el-col v-if="item3.name == '小组完成进度'">
                                      <el-progress :percentage="item3.role"></el-progress>
                                      <!-- <el-col :span="12" style="float: right;">
                                        <p style="padding-right: 10px;float: right;color: #89898c;">
                                          {{item3.surplusNum}}</p>
                                      </el-col> -->
                                    </el-col>
                                  </el-row>
                                </el-col>
                              
                              </div>
                            </el-col>
                          </el-row>
                        
                        </el-col>
                      </el-row>
                    
                    </el-col>
                  
                  </el-col>
                </el-row>
              </el-col>
              <el-col>
                <el-row type="flex" justify="center">
                  <el-col class="listbgc">
                    <el-col :span="1" style="position: absolute;height: 100%;">
                      <div class="teamname" >
                        <div class="team1">
                          <p>{{jf.name}}</p>
                        </div>
                      
                      </div>
                    </el-col>
                    <el-col :span="23" style="float: right;">
                      <el-row style="margin-top: 20px;">
                        <el-col style="width: 25%;" v-for="(item5,index5) in jf.jFList"
                                :key="index5">
                          <el-row type="flex" justify="center">
                            <el-col :span="23">
                              <div
                                class="listbox">
                                <el-row class="roletitle">
                                  <el-col>
                                    <p style="cursor: pointer;" @click="seejf(item5.username,item5.name)">
                                      {{item5.name}}</p>
                                  </el-col>
                                </el-row>
                                <el-col class="tasknum">
                                  <el-row style="margin-bottom: 10px;">
                                    <el-col style="margin-bottom: 5px;">
                                      <el-col :span="14">
                                        <p>反馈/总反馈 : </p>
                                      </el-col>
                                      <el-col :span="10" style="float: right;">
                                        <p style="padding-right: 10px;float: right;" v-if="item5.num !== null"
                                           :style="{color : item5.type}">{{item5.num}}/{{item5.total}}</p>
                                        <p v-if="item5.num == null" style='font-size: 12px;'>暂无工作记录</p>
                                      </el-col>
                                    </el-col>
                                    
                                    <el-col>
                                    
                                    </el-col>
                                  </el-row>
                                </el-col>
                              
                              </div>
                            </el-col>
                          </el-row>
                        
                        </el-col>
                      </el-row>
                    
                    </el-col>
                  
                  </el-col>
                </el-row>
              </el-col>
            </el-col>
          
          </el-col>
        </el-row>
      </div>
    </div>
    
    <div v-if="type == 1">
      <work-record v-show="assshow" :trans-data="transdata"></work-record>
    </div>
    <div v-if="type == 2">
      <work-record1 v-show="assshow" :trans-data="transdata"></work-record1>
    </div>
    <div v-if="type == 3">
      <work-jiaofu v-show="assshow" :trans-data="transdata"></work-jiaofu>
    </div>
    
    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">选择日期超过当前日期</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="handleClose">确 定</el-button>
    <el-button round @click="handleClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import moment from 'moment'
  import axios from 'axios'
  import WorkRecord from './workrecord'
  import WorkRecord1 from './workrecord1'
  import WorkJiaofu from './workjiaofu'
  
  
  export default {
    name: "wordrecord2",
    data() {
      return {
        date: moment(new Date()).format('YYYY-MM-DD'),
        data: moment(new Date()).format('YYYY-MM-DD'),
        taskdetails: [],
        percentage:20,
        colorlist: ["#2cc6c9", "#9492d6", "#4bcfa5", "#79b7ee", "#fec35c", "#ff7c7c"],
        type: null,
        assshow: false,
        assistant: [],
        hr: [],
        jf:[],
        errordialogVisible: false,
        secondshow: false,
        secondtitle: null,
        transdata: {
          username: this.username,
          date: this.date
        }
      }
    },
    created() {
      this.getAlldata();
    },
    methods: {
      getAlldata() {
        //获取所有人的今日任务数据
        axios.post(this.url + '/workrecord/selectallmembers', {
          time: this.date
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.assistant = res.data.data.assistant;
            this.hr = res.data.data.hr;
            this.jf = res.data.data.jf;
            this.secondshow = false;
            this.secondtitle = null;
          }
        });
      },
      //日历的点击事件，同时判断时间是否超过当前日期
      test(date) {
        var date = moment(date).format('YYYY-MM-DD');
        axios.post(this.url + '/workrecord/checktime', {
          time: date,
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.date = date;
            this.getAlldata();
          }
          if (res.data.code == -300) {
            this.data = this.date;
            this.errordialogVisible = true;
            document.documentElement.style.overflow = 'hidden';
          }
        })
      },
      //查看详情
      seeother(role, username, name) {
        //助理跳转页面
        this.secondshow = true;
        this.secondtitle = name;
        if (role == "assistant") {
          this.type = 1;
          this.transdata.username = username;
          this.transdata.date = this.date;
          this.assshow = true;
        }
        //专员跳转页面
        if (role == "hr") {
          this.type = 2;
          this.transdata.username = username;
          this.transdata.date = this.date;
          this.assshow = true;
        }
      },
      //交付跳转页面
      seejf(username,name){
        this.secondshow = true;
        this.secondtitle = name;
        this.type = 3;
        this.transdata.username = username;
        this.transdata.date = this.date;
        this.assshow = true;
      },
      //显示初始样式
      manageshow() {
        this.username = null;
        this.type = null;
        this.assshow = false;
        this.secondshow = false;
        this.secondtitle = null;
        this.transdata = {username: this.username, date: this.date};
      },
      handleClose() {
        this.errordialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
    },
    components: {
      WorkRecord,
      WorkRecord1,
      WorkJiaofu
    },
    watch: {
      'data': function (val) {
        this.test(moment(val).format('YYYY-MM-DD'))
      }
    }
  }
</script>

<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .listbox {
    width: 185px;
    height: 100px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 0 auto;
    margin-bottom: 15px;
  }
  
  .tasknum {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .roletitle {
    padding-left: 16px;
  }
  
  @media screen and (min-width: 1200px) and (max-width: 1900px) {
    .listbox {
      width: 185px;
    }
  }
  
  .tasknum {
    color: #89898c;
    font-size: 14px;
    margin-top: 5px;
  }
  
  .teamname {
    height: 100%;
    width: 38px;
    background-color: #2cc6c9;
    box-shadow: 3px 0 3px -1px #ccc;
    letter-spacing: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  
  .listbgc {
    background-color: #f5f8fa;
    margin-bottom: 18px;
    position: relative;
    height: 100%;
  }
  
  .team1 {
    width: 50%;
    color: #fff;
  }
  
  .roletitle {
    padding-top: 10px;
  }
  
  .roletitle p {
    font-size: 16px;
    color: #57adfb;
    margin-bottom: 12px;
  }
  
  .left2 {
    margin-bottom: 10px;
    width: 72.4%;
    margin-left: 25px;
  }
  
  .textactive {
    color: #1099ff;
    cursor: pointer;
  }
  
  @media only screen and (min-width: 1920px) {
    .listbox {
      width: 263px;
    }
    
    .left2 {
      width: 80.6%;
    }
  }
</style>
